<template>
  <div class="wrapper">
    <minbar title="登录" :leftButton="false" :isPadding="true"></minbar>
    <!-- tab切换页 -->
    <div class="x-tab">
      <div class="x-tab-button x-center" @click="tabClick(0)">
        <text :class="['x-tab-text',tabActive?'x-tab-active':'']">验证码登录</text>
      </div>
      <div class="x-tab-button x-center" @click="tabClick(1)">
        <text :class="['x-tab-text',tabActive?'':'x-tab-active']">密码登录</text>
      </div>
    </div>
    <!-- 验证码层 -->
    <div class="content-div" v-if="tabActive">
      <div class="x-content">
        <!-- 用户名 -->
        <div class="x-cli-div">
          <input type="text"  ref="usname" class="x-input" placeholder="请输入用户名" v-model="username" @input="userinput" @focus="changeClean" />
          <text v-if="showClean" class="cli-icon iconfont cli-icon2" @click="cleanUsername">&#xe638;</text>
        </div>
        <!-- 验证码 -->
        <div class="x-vercode-div">
          <div class="x-vercode-left">
            <input type="text"  ref="vecode" class="x-input" placeholder="请输入验证码" v-model="vercode" @input="vercodeinput" /> 
          </div>
          <div class="x-vercode-send">
            <button 
              :text="verBtnText" 
              :textStyle="{fontSize:30}"
              :btnStyle="{width:220,height:80}" 
              :disabled="verbtnDisabled" 
              @buttonClick="sendVerCode"></button>
          </div>
        </div>
        <!-- 提醒的字 -->
        <text class="x-ts-text">选择发送短信验证或者语音验证码</text>
        <!-- 登录按钮 -->
        <div class="">
          <button :text="loginBtnText" 
          :textStyle="{fontSize:30}"
          :showLoadding="showLoginLoadding" 
          :disabled="btnDisabled" 
          :btnStyle="{width:600,marginTop:120}" 
          @buttonClick="login"></button>
        </div>
        <div class="x-xy-div">
          <text class="x-xy-text">点击注册意味着您同意</text>
          <text class="x-xy-text2">《用户协议》</text>
        </div>
      </div>
    </div>
    <!-- 用户密码层 -->
    <div class="content-div" v-else>
      <div class="x-content">
        <!-- 用户名 -->
        <div class="x-cli-div">
          <input type="text"  ref="usname" class="x-input" placeholder="请输入用户名" v-model="username" @input="userinput" @focus="changeClean" />
          <text v-if="showClean" class="cli-icon iconfont cli-icon2" @click="cleanUsername">&#xe638;</text>
        </div>
        <!-- 验证码 -->
        <div class="x-vercode-div" >
          <div class="x-vercode-left">
            <input type="password" class="x-input" placeholder="请输入密码" v-model="userpass" @input="passinput" /> 
          </div>
        </div>
        <!-- 提醒的字 -->
        <div class="x-xy-div" style="margin-top:15px;">
          <text class="x-xy-text">点击注册意味着您同意</text>
          <text class="x-xy-text2">《用户协议》</text>
        </div>
        <!-- 登录按钮 -->
        <div class="">
          <button :text="loginBtnText" 
          :textStyle="{fontSize:30}"
          :showLoadding="showLoginLoadding" 
          :disabled="btnDisabled" 
          :btnStyle="{width:600,marginTop:120}" 
          @buttonClick="login"></button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import asCore from "./common/js/core";
var modal = weex.requireModule("modal");
var stream = weex.requireModule("stream");
var pref = weex.requireModule("storage");
const navigator = weex.requireModule('navigator');
const loginBroad = new BroadcastChannel('login');
export default {
  components: {
    "button": require("./common/component/button.vue"),
    "minbar" : require("./common/component/minbar.vue"),
  },
  computed: {
      tabActive () {
        if(this.showActive) {
          return true;
        }else{
          return false;
        }
      }
  },
  created() {
    var globalEvent = weex.requireModule("globalEvent");
    globalEvent.addEventListener("onPageInit", function(e) {
      const page = weex.requireModule("page");
      page.enableBackKey(false); 
      page.setBackKeyCallback(()=>{ 
        page.enableBackKey(true); 
        page.exit();
      });
    });
  },
  data() {
    return {
      loginType:2,  //登录类型
      showActive:true,
      showLoginLoadding: false,   //显示登录中
      btnDisabled: false,   //按钮是否禁用
      verbtnDisabled:false, //验证码是否禁用
      loginBtnText: "登录", 
      verBtnText:"发送验证码",
      username: "", //用户名
      userpass: "", //密码
      vercode:"",   //验证码
      code_sn:"",   //验证码编码
      showClean:false //显示清空按钮
    };
  },
  methods: {
    tabClick(index){
      if(index==0){
        //验证码
        this.loginType = 2;
        this.showActive = true;
      }else{
        //密码
        this.loginType = 1;
        this.showActive = false;
      }
    },
    /* 输入用户名 */
    userinput(event) {
      this.username = event.value;
      this.changeClean()
    },
    /* 输入验证码 */
    vercodeinput(event){
      this.vercode = event.value;
    },
    /* 输入密码 */
    passinput(event) {
      this.userpass = event.value;
    },
    /* 检查用户名密码 */
    loginCheck() {
      if (!this.username) {
        this.hintShow("请输入用户名");
        return false;
      }
      if(this.loginType==2){
        if (!this.vercode) {
          this.hintShow("请输入验证码");
          return false;
        }
      }else{
        if (!this.userpass) {
          this.hintShow("请输入密码");
          return false;
        }
      }
      return true;
    },
    /* 登录逻辑 */
    login() {
      var _this = this;
      /* 登录验证 */
      if(!_this.loginCheck()) return;
      /* 设置登录状态 */
      _this._btnDisabled(true);
      var token = "";
      /* 验证码登录 */
      if(_this.loginType==2){
        _this._login(2,{
           code:_this.vercode,
           code_sn:_this.code_sn
        });
      /* 密码登录 */
      }else if(_this.loginType==1){
        _this._login(1,{
          password:_this.userpass
        });
      }
    },
    _login(type, opts) {
        var _this = this;
        var options = {
          type:type,
          mobile:_this.username,
          ...opts,
        };
        asCore.post("/member/login",options,(data,msg,flag)=>{
          if(flag==true){
            asCore.setToken(data);
            _this.setBtnInfo(false,"登录成功",true);
            loginBroad.postMessage({success:1});
            navigator.back();
          }else{
            _this._btnDisabled(false);
            _this.hintShow(msg);
          }
        });
    },
    /* 发送验证码 */
    sendVerCode: function() {
      var _this = this;
      if(!_this.username){
        asCore.toast("请输入手机号码");
        return;
      }
      _this.verbtnDisabled = true;
      _this.verBtnText = "发送中..";
      asCore.post("/sms/send",{
          type:"register_validate",
          mobile:_this.username
      },(data,msg,flag)=>{
        if(flag){
          _this.code_sn = data;
          var time = 60;
          var t = setInterval(() => {
            time--;
            _this.verBtnText = "已发送("+time+")";
            if(time<1){
              _this.verBtnText = "发送验证码";
              _this.verbtnDisabled = false;
              clearInterval(t);
            }
          }, 1000);
        }else{
          asCore.toast("验证码发送错误");
          _this.verBtnText = "发送验证码";
          _this.verbtnDisabled = false;
        }
      });
    },
    hintShow: function(msg) {
      modal.toast({ message: msg });
    },
    /* 设置按钮禁用 */
    _btnDisabled: function(value) {
      if (value) {
        this.showLoginLoadding = true;
        this.loginBtnText = "登录中...";
        this.btnDisabled = true;
      } else {
        this.showLoginLoadding = false;
        this.loginBtnText = "登录";
        this.btnDisabled = false;
      }
    },
    setBtnInfo : function(loadding,label,disabled){
      this.showLoginLoadding = loadding;
      this.loginBtnText = label;
      this.btnDisabled = disabled;
    },
    cleanUsername(){
      var _this = this;
      _this.username = '';
      _this.$nextTick(()=>{
        _this.showClean = false;
      });
    },
    changeClean(){
      var _this = this;
      var e = this.$refs.usname.attr.value;
      if(e!=''){
        _this.showClean = true;
      }else{
        _this.showClean = false;
      }
    }
  }
};
</script>
<style scoped>
  .iconfont {
    font-family:iconfont;
  }
  .x-center{
    align-items: center;
    justify-content: center;
  }
  .x-tab {
    height: 100px;
    border-bottom-width:2px;
    border-bottom-color: #e0e0e2;
    flex-direction: row;
  }
  .x-tab-button {
    flex: 1;
  }
  .x-tab-button:active {
    background-color: #eee;
  }
  .x-tab-text {
    color:#9c9ba1;
    font-size:32px;
    /*color:#9c9ba1*/
  }
  .x-tab-active {
    color: #887147;
  }
  .content-div {
    align-items: center;
  }
  .x-content {
    width: 600px;
    padding-top:100px;
  }
  .x-cli-div {
    width: 600px;
    height:80px;
    border-bottom-color: #e0e0e2;
    border-bottom-width: 1px;
    flex-direction: row;
  }
  .x-vercode-div {
    height:80px;
    width: 600px;
    flex-direction: row;
    margin-top:50px;
  } 
  .x-vercode-left {
    border-bottom-color: #e0e0e2;
    border-bottom-width: 1px;
    flex: 1;
  }
  .cli-icon {
    font-size: 40px;
    color:#888888;
    height:80px;
    width:50px;
    margin-top:20px;
  }

  .cli-icon2{
    font-size:34px;
    color:#9e9e9e;
    margin-top:20px;
  }
  .x-input {
    height: 80px;
    font-size: 32px;
    padding-bottom: 15px;
    flex: 1;
  }
  .x-xy-div {
    flex-direction: row;
  }
  .x-ts-text {
    color: #887147;
    font-size:25px;
    margin-top:40px;
  }
  .x-xy-text {
    color: #9c9ba3;
    font-size:25px;
    margin-top:25px;
  }
  .x-xy-text2 {
    color: #887147;
    font-size:25px;
    margin-top:25px;
  }
</style>
